@page "/counter"
@rendermode InteractiveServer
@using Blazor.Extensions.Canvas
@using Blazor.Extensions;
@using Blazor.Extensions.Canvas.Canvas2D;
@using FaceCat;

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<Blazor.Extensions.Canvas.BECanvas Width="700" Height="550" @ref="_canvasReference" />
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        FCRect rect = new FCRect(0, 0, _canvasReference.Width, _canvasReference.Height);
        m_paint.m_context = this._context;
        m_paint.beginPaint(0, rect, rect);
        m_native.onPaint(rect);
        m_paint.endPaint();
    }

    protected BECanvasComponent _canvasReference;
    private Canvas2DContext _context;
    private FCNative m_native;
    private BlazorHost m_host;
    private BlazorPaint m_paint;
    private FCUIXml m_xml;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (m_native == null)
        {
            m_xml = new FCUIXml();
            m_xml.createNative();
            m_native = m_xml.getNative();
            m_paint = new BlazorPaint();
            m_native.setPaint(m_paint);
            m_host = new BlazorHost();
            m_native.setHost(m_host);
            m_host.setNative(m_native);
            m_native.setSize(new FCSize(700, 550));
            string xml = @"<?xml version=""1.0"" encoding=""UTF-8""?>
  <html xmlns=""facecat"">
    <body>
      <div dock=""fill"" backcolor=""rgb(140,192,81)"">
        <div name=""Div"" text=""Div"" location=""368,127"" size=""247,326"" align=""center"" vertical-align=""middle"" backcolor=""rgb(170,178,189)"" cornerradius=""10"">
          <input type=""text"" name=""TextBox"" location=""14,18"" size=""220,45"" cornerradius=""0"" bordercolor=""rgb(0,0,0)"" backcolor=""rgb(42,48,72)"" font=""Default,30.0"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnAC"" text=""AC"" location=""14,69"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(62,72,95)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnAddSub"" text=""+/-"" location=""69,69"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(62,72,95)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnMod"" text=""%"" location=""124,69"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(62,72,95)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnDivide"" text=""÷"" location=""179,69"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(254,159,11)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnNum7"" text=""7"" location=""14,117"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnNum8"" text=""8"" location=""69,117"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnNum9"" text=""9"" location=""124,117"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnMulti"" text=""×"" location=""179,117"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(254,159,11)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnNum4"" text=""4"" location=""14,165"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnNum5"" text=""5"" location=""69,165"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnNum6"" text=""6"" location=""124,165"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnSub"" text=""-"" location=""179,165"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(254,159,11)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnNum1"" text=""1"" location=""14,213"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnNum2"" text=""2"" location=""69,213"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnNum3"" text=""3"" location=""124,213"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnAdd"" text=""+"" location=""179,213"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(254,159,11)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnNum0"" text=""0"" location=""14,261"" size=""110,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnDot"" text=""."" location=""124,261"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(93,103,121)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
          <input type=""button"" name=""btnResult"" text=""="" location=""179,261"" size=""55,48"" font=""Default,18.0"" backcolor=""rgb(254,159,11)"" bordercolor=""rgb(0,0,0)"" textcolor=""rgb(255,255,255)""/>
        </div>
      </div>
    </body>
  </html>";
            m_xml.loadXml(xml, null);
            m_native.update();
        }
        try
        {
            this._context = await this._canvasReference.CreateCanvas2DAsync();
            FCRect rect = new FCRect(0, 0, _canvasReference.Width, _canvasReference.Height);
            m_paint.m_context = this._context;
            m_paint.beginPaint(0, rect, rect);
            m_native.onPaint(rect);
            m_paint.endPaint();
        }catch(Exception ex)
        {
            Console.WriteLine(ex.Message + "\r\n" + ex.StackTrace);
        }
    }
}